<template>
  <Echart :height="160" :options="terminalChartOptions" />
  <div class="flex flex-col items-center text-sm">
    <div class="flex items-center text-gray-500">
      <span>{{ title }}</span>
      <el-popover :width="200" trigger="hover" :content="tips">
        <template #reference>
          <Icon icon="ep:warning" :size="14" />
        </template>
      </el-popover>
    </div>
    <div class="custom-text-16">
      <span class="c-[var(--el-color-primary)]">{{ value }}</span>
      {{ prefix || '' }}
    </div>
  </div>
</template>
<script lang="ts" setup>
import { EChartsOption } from 'echarts'
import { propTypes } from '@/utils/propTypes'
import { fenToYuan } from '@/utils'

const props = defineProps({
  tips: propTypes.string.def(''),
  title: propTypes.string.def('').isRequired,
  prefix: propTypes.string.def(''),
  value: propTypes.any.def(0).isRequired,
  seriesData: propTypes.array.def([]),
  isFormatting: propTypes.bool.def(true) //是否分转元
})

defineOptions({ name: 'ComparisonEchartCard' })

const loading = ref(true) // 加载中

/** 统计图配置 */
const terminalChartOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'item',
    confine: true,
    formatter: '{a} <br/>{b} : {c} ',
    position: 'bottom'
  },
  legend: {
    show: false
  },
  // roseType: 'area',
  series: [
    {
      name: '门店名称',
      type: 'pie',
      radius: ['65%', '90%'],
      label: {
        show: false,
        position: 'center',
        formatter: '总计:{c}'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
}) as EChartsOption

watch(
  () => props.seriesData,
  () => {
    getMemberTerminalStatisticsList(props.seriesData)
  }
)
/** 按照终端，查询会员统计列表 */
const getMemberTerminalStatisticsList = async (seriesData) => {
  loading.value = true
  const list = seriesData
  terminalChartOptions.series![0].data = list.map((dictData: any) => {
    return {
      name: dictData.classiName,
      value: props.isFormatting ? fenToYuan(dictData.payValue) || 0 : dictData.payValue || 0
    }
  })
  loading.value = false
}

/** 初始化 **/
onMounted(() => {})
</script>
